import { ReactNode } from 'react'
import { cn } from '@/lib/utils'

interface CompactLayoutProps {
  children: ReactNode
  className?: string
  spacing?: 'xs' | 'sm' | 'md' | 'lg'
  padding?: 'xs' | 'sm' | 'md' | 'lg'
}

const spacingClasses = {
  xs: 'space-y-2',
  sm: 'space-y-3',
  md: 'space-y-4',
  lg: 'space-y-6'
}

const paddingClasses = {
  xs: 'p-2',
  sm: 'p-3',
  md: 'p-4',
  lg: 'p-6'
}

export function CompactLayout({ 
  children, 
  className, 
  spacing = 'md',
  padding = 'md' 
}: CompactLayoutProps) {
  return (
    <div className={cn(
      spacingClasses[spacing],
      paddingClasses[padding],
      className
    )}>
      {children}
    </div>
  )
}

export function CompactCard({ 
  children, 
  className 
}: { 
  children: ReactNode
  className?: string 
}) {
  return (
    <div className={cn('p-3 border border-border rounded-lg', className)}>
      {children}
    </div>
  )
}

export function CompactGrid({ 
  children, 
  className,
  cols = 1
}: { 
  children: ReactNode
  className?: string
  cols?: 1 | 2 | 3 | 4
}) {
  const gridCols = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
  }

  return (
    <div className={cn(
      'grid gap-3',
      gridCols[cols],
      className
    )}>
      {children}
    </div>
  )
}

export function CompactHeading({ 
  children, 
  className 
}: { 
  children: ReactNode
  className?: string 
}) {
  return (
    <h1 className={cn('text-xl font-bold text-gray-900', className)}>
      {children}
    </h1>
  )
}

export function CompactSubheading({ 
  children, 
  className 
}: { 
  children: ReactNode
  className?: string 
}) {
  return (
    <p className={cn('text-gray-600 text-sm', className)}>
      {children}
    </p>
  )
}
